<template>
	<view>
		<el-dialog v-model="show" :title="title" :width="width" :before-close="close">
			<view>
				<view style="padding-top: 5px;">
					<el-input :placeholder="placeholder" v-model="content" border="surround" :type="type" clearable></el-input>
				</view>
				<view style="height: 5px;"></view>
				<slot></slot>
			</view>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="close">取消</el-button>
					<el-button type="primary" @click="confirm">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
	</view>
</template>

<script>
	import {
		useMouse
	} from '@/utils/index.js'
	export default {
		props: {
			modalShow: {
				type: Boolean,
				default: false
			},
			width: {
				type: Number,
				default: 350
			},
			type: {
				type: String,
				default: 'text'
			},
			title: {
				type: String,
				default: '请输入内容'
			},
			placeholder: {
				type: String,
				default: '请输入内容'
			}
		},
		data() {
			return {
				content: '',
				show: true,
			}
		},
		mounted() {
			this.content = '';
		},
		setup() {
			return useMouse();
		},
		methods: {
			close() {
				this.content = ''
				this.$emit("closeModal", false);
			},
			confirm() {
				if (this.content == '') {
					return this.warningMessage("请填写内容");
				}
				this.$emit("confirm", this.content);
				this.content = '';
			}
		}
	}
</script>

<style>

</style>